<template>
  <div>
    <n-popover trigger="hover">
      <template #trigger>
        <a-avatar size="middle" :style="{ backgroundColor: color, verticalAlign: 'middle',cursor: 'pointer' }">
          {{ StepList[currentStep == 9 ? currentStep : currentStep + 1].title }}
        </a-avatar>
      </template>
      <a-steps
          size="default"
          :current="currentStep + 1"
          :items="StepList"
      ></a-steps>
    </n-popover>
  </div>
</template>
<script setup>
import { computed, defineProps, ref, watch } from 'vue'
import useUserStore from "@/store/modules/user"
import {storeToRefs} from 'pinia'
const userStore = useUserStore()
const props = defineProps({
  record:{
    type:Object,
    default:{}
  }
})
const color = storeToRefs(userStore).color

const stepsList = {
  '下架': 'loadingTime',
  '装柜': 'loadingTime',
  '进港': 'etdDate',
  '开船': 'atdDate',
  '到港': 'ataDate',
  '卸船': 'unloadContainerTime',
  '入仓': 'arrivalWarehouseTime',
  '卸货': 'uploadGoodsTime',
  '上架': 'shelvesAddedTime',
  '完成': 'completedTime'
}

const StepList = computed(() => {
  return Object.keys(stepsList).map(key => {
    const value = stepsList[key]
    const time = props.record[value]
    if (time) {
      const [year, month, day] = time.split('-')
      return {
        year,
        description: `${year}-${month}-${day}`,
        title: key
      }
    }
    return {
      title: key
    }
  })
})
const currentStep = computed(() => {
  return StepList.value.findLastIndex((item) => {
    return item.hasOwnProperty('year')
  })
})
</script>
<style scoped>
:deep(.ant-steps-item-content){
  width:100px
}
</style>
